<template>
  <div class="container">

    <hr>
      <section>
         <DiagnosisComponent :subTitle="'诊断记录'" :patientId="patientId"/>
      </section> 
    <hr>

    <hr>
      <section>
        <ExamComponent :subTitle="'检查记录'" :patientId="patientId"/>
      </section>
    <hr>

    <hr>
      <section>
        <HealthComponent :subTitle="'健康历史'" :patientId="patientId"/>
      </section>
    <hr>

    <hr>
      <section>
        <LifestyleComponent :subTitle="'生活习惯记录'" :patientId="patientId"/>
      </section>
    <hr>

    <hr>
      <section>
        <MedicinalComponent :subTitle="'用药记录'" :patientId="patientId"/>
      </section>
    <hr>

    <hr>
      <section>
        <TherapyComponent :subTitle="'治疗记录'" :patientId="patientId"/>
      </section>
    <hr>


  </div>
</template>

<script>
import DiagnosisComponent from './components/diagnosis/index.vue'
import ExamComponent from './components/exam/index.vue'
import HealthComponent from './components/health/index.vue'
import LifestyleComponent from './components/lifestyle/index.vue'
import MedicinalComponent from './components/medicinal/index.vue'
import TherapyComponent from './components/therapy/index.vue'

export default {
  name: 'MainPage',
  components: {
    DiagnosisComponent,
    ExamComponent,
    HealthComponent,
    LifestyleComponent,
    MedicinalComponent,
    TherapyComponent
  },
  data() {
    console.log(this.$route.params);
    console.log(this.$route.params.patientId);

    return{
      patientId : this.$route.params && this.$route.params.patientId
    }
  }
}
</script>

<style>
.main-container {
  display: flex;
  flex-direction: column;
  /* height: 100vh; */
}
</style>
